<template>
    <div class="wrapper">
        <mt-header title="头像" class="no-bg">
            <mt-button icon="back" slot="left" @click="$router.back(-1)"></mt-button>
            <mt-button slot="right" @click="$router.back(-1)">
                <i class="icon iconfont icon-guanbi"></i>
            </mt-button>
        </mt-header>
        <div class="headImg-box">
            <img v-if="userInfo && userInfo.photo" :src="userInfo && userInfo.photo">
            <img v-else src="http://47.75.99.213/app/cdn/default-headImg.png">
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" @click.native="callJava()">更换头像</mt-button>
        </div>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { VueCropper }  from 'vue-cropper' 
import { Toast } from 'mint-ui';
import { getSystemType, dataURLtoFile } from '@/utils'

export default {
    data: function () {
        return {
            showCropper: false,
            file:''
        }
    },
    components: {
        VueCropper
    },
    computed: {
        ...mapGetters([
            'userInfo'
        ])
    },
    mounted(){
        //将要给原生调用的方法挂载到 window 上面
        window.sendPhotoBase64 = this.sendPhotoBase64;

        if( getSystemType() == 'android' ){
            this.systemType = '2'
        }
    },
    methods: {
        callJava(){
            window.javaObj.startAlbumPickUp();
        },
        sendPhotoBase64(base64_str) {
            console.log(base64_str);
            this.file = dataURLtoFile('data:image/png;base64,' + base64_str);
            let formData = new FormData;
            formData.append('photoFile', this.file);

            this.$store.dispatch('UpdateInfoByHeadImg',formData).then((res) => {
                if( res.code == 200 ){
                    Toast({
                        message: "已设置",
                        iconClass: 'icon iconfont icon-ic_check'
                    })
                    this.$router.push('/account/myInfo')
                }else{
                    Toast({
                        message: res.msg,
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    });
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    #upload{
        opacity:0;
    }
    .cropperBox{
        max-width:585px;
        position: fixed;
        width: 100%;
        top: 0;
        height: calc(100% - 50px);
        .vue-cropper{
            background: black;
            background-image: none!important;
            width:100%;
        } 
        .btn{
            height: 50px;
            background: #565656;
            width: 100%;
            padding: 0 15px;
            display:flex;
            a{
                color: white;
                font-size:14px;
                display: inline-block;
                line-height: 50px;
                flex:1;
                text-align:center;
                &:nth-of-type(1){
                    text-align:left; 
                }
                &:nth-of-type(3){
                    text-align:right;
                }
            }
        }
    }
}  
</style>